Non-text Contrast
Some buttons and links have no words in them at all — just a little drawing: a magnifying glass for "search", three lines for "menu", an arrow for "next", an X for "close".
If that drawing is too pale against the background — imagine a light-grey arrow on white — a person with low vision simply cannot see that there is a button there. This check looks for exactly that: icon-only buttons and links whose icon is too faint to be seen.
Everyday example: a white product card with a light-grey heart icon for "add to favourites". You know it is there because you already know the site. Someone with reduced vision sees an empty white square.
How the check behaves
Think of it as three people working in sequence.
The scout collects every clickable thing on the page — buttons, links, tabs — and throws away anything with readable words inside it. Things like 0, 11 or + do not count as words; they are badges. Neither do icon-font code names such as keyboard_arrow_right, which look like text behind the scenes but render as a picture on screen.
The eye takes a picture of the page, draws a red outline around each surviving candidate, and asks an AI vision model one question: "which of these outlined boxes contain no visible text?" The model is explicitly told "if in doubt, report it" — the team deliberately chose to over-report and filter afterwards rather than miss things.
The measurer works out two colours for each confirmed icon-only control: the colour of the icon, and the colour of the background behind it. It prefers the exact colours declared in the site's stylesheet. When it cannot read them, it falls back to taking a tiny photo of just that control and picking the dominant colour that is most different from the background — the assumption being "that is the icon".
Then a single rule: if the difference between icon and background is less than 3:1, it is reported. (3:1 is the industry threshold — think "clearly darker or clearly lighter", not "slightly tinted".)
There are separate variants for the normal state and the hover state, both in production. Variants for the focus and selected states exist but are not production-ready.
For the detail of which controls make it onto the list the measurer works from — and why that list caps the accuracy of the whole check — see What the Non-text Contrast Check Looks At.
What it covers well
- Icon-only buttons, links and tabs — hamburger menus, chevrons and arrows, close X's, search magnifiers, share and social icons.
- Icons drawn as vector graphics, or with one of the recognised icon fonts (Material Icons, Font Awesome, Glyphicons, IcoMoon, Ionicons, Dashicons, Genericons, Typicons).
- Controls with a tiny numeric badge (
0,11) — the badge is ignored and the icon is still checked. - Colours declared with transparency, and backgrounds found by looking up through the containing elements.
What it does not cover
- Only buttons, links and tabs. An informative icon that is not clickable — a status icon, a chart, an icon next to a paragraph — is never examined by this check.
- Any real text kills the check. If a control has both a label and a faint icon (for example "Download ⬇"), the whole control is discarded and the icon is never measured. This is probably the single biggest blind spot.
- Photos and logos are skipped by default. A brand logo or a product thumbnail is not contrast-checked here. A logo that is itself a link or button is kept, though.
- Controls whose only content is an image — the classic "image link" — are deliberately skipped. They are considered an alternative-text topic, not a contrast one.
- Invisible controls are skipped. Anything fully transparent, since measuring it would give meaningless colours.
- When the background cannot be determined, white is assumed. Over a photo, a gradient or a coloured hero banner, the verdict can therefore be wrong in either direction.
- The "photo of the icon" fallback is a guess. For multi-coloured icons, gradients, or very thin anti-aliased strokes, the colour it picks may not be the colour a human perceives. A real case is on record where the same icon flipped between pass and fail across identical runs before the sampling was made more robust, so borderline cases remain fragile.
- Only what is on the page when the picture is taken. Icons inside a closed menu, an unopened modal, a later carousel slide, or content that appears only after an interaction, are not seen.
- Disabled controls. The standard exempts disabled and inactive controls from this requirement, and no such exemption was found in this check — unlike the radio and checkbox check, which has one explicitly. A greyed-out icon button can therefore be reported as a false positive.
- The AI step is a judgement call, not a certainty. It is tuned for coverage over precision, so expect occasional over-reporting; and it can still miss an element it misreads in the picture.